<template>
	<view>
		<view class="tab-bar">
			<u-tabs :list="list" :is-scroll="false" :current="current" active-color="#c6100e" height="80" bg-color="#f8f8f8" @change="change"></u-tabs>
		</view>
		
		<!-- 待到达模块 -->
	<view class="list" v-if="current == 1 || current == 0">
			<view class="detail">
				<view style="padding-top: 50rpx;">
				<view class="state">
					<view style="margin-left: 2rpx;">
						<text>订单状态：待到达现场</text>
					</view>
					<view>
						<view class="btn" @click="openArrive">{{arrive}}</view>
					</view>
				</view>
				<view class="message">
					<view>
						<text>订单总价：2000元</text>
					</view>
					<view>
						<text>联系人：杜石头</text>
					</view>
					<view>
						<text>联系电话：13678909876</text>
					</view>
					<view>
						<text>开始时间：2021-06-13 18:00:00</text>
					</view>
					<view>
						<text>结束时间：2021-06-13 18:00:00</text>
					</view>
					<view>
						<text>地址：深圳市罗湖区东门街道金融大厦102室</text>
					</view>
				</view>
			</view>
		</view>
	</view>
		 
		<!-- 待完成模块 -->
		<view class="list" v-if="current == 2 || current == 0">
				<view class="detail">
					<view style="padding-top: 50rpx;">
					<view class="state">
						<view style="margin-left: 2rpx;">
							<text>订单状态：待完成邀约</text>
						</view>
						<view>
							<view class="btn" @click="openFinish">{{finish}}</view>
						</view>
					</view>
					<view class="message">
						<view>
							<text>订单总价：2000元</text>
						</view>
						<view>
							<text>联系人：杜石头</text>
						</view>
						<view>
							<text>联系电话：13678909876</text>
						</view>
						<view>
							<text>开始时间：2021-06-13 18:00:00</text>
						</view>
						<view>
							<text>结束时间：2021-06-13 18:00:00</text>
						</view>
						<view>
							<text>地址：深圳市罗湖区东门街道金融大厦102室</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 已完成模块 -->
		<view class="list" v-if="current == 3 || current == 0">
				<view class="detail">
					<view style="padding-top: 50rpx;">
					<view class="state">
						<view style="margin-left: 2rpx;">
							<text>订单状态：已完成邀约</text>
						</view>
						<view style="visibility: hidden;">
							<!-- 占位,默认隐藏不显示按钮 -->
							<view class="btn">{{finish}}</view>
						</view>
					</view>
					<view class="message">
						<view>
							<text>订单总价：2000元</text>
						</view>
						<view>
							<text>联系人：杜石头</text>
						</view>
						<view>
							<text>联系电话：13678909876</text>
						</view>
						<view>
							<text>开始时间：2021-06-13 18:00:00</text>
						</view>
						<view>
							<text>结束时间：2021-06-13 18:00:00</text>
						</view>
						<view>
							<text>地址：深圳市罗湖区东门街道金融大厦102室</text>
						</view>
					</view>
				</view>
			</view>
		</view>
			
			<!-- 确定到达弹框 -->
			<view>
					<u-modal v-model="show" :show-confirm-button="false" :show-title = "false">
						<view class="title">
							<text>{{arrive}}</text>
						</view>
						<view class="slot-content">
							<rich-text :nodes="content"></rich-text>
						</view>
						<view style="display: flex;justify-content: space-between;height: 88rpx;">
						<view class="cancel" @click="cancel">
							<text>取消</text>
						</view>
						<view class="confirm" @click="confirm">
							<text>确认</text>
						</view>
						</view>
					</u-modal>
				</view>
				
				<!-- 确定完成弹框 -->
				<view>
						<u-modal v-model="isShow" :show-confirm-button="false" :show-title = "false">
							<view class="title">
								<text>{{finish}}</text>
							</view>
							<view class="slot-content">
								<rich-text :nodes="content"></rich-text>
							</view>
							<view style="display: flex;justify-content: space-between;height: 88rpx;">
							<view class="cancel" @click="cancel">
								<text>取消</text>
							</view>
							<view class="confirm" @click="confirm">
								<text>确认</text>
							</view>
							</view>
						</u-modal>
					</view>
					
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arrive: "确定到达",
				finish: "确定完成",
				show: false,//确定到达弹框
				isShow: false,//确定完成弹框
									content: `
										书法家:张一侯<br>
										邀约开始时间:2021-06-12 08:00:00<br>
										邀约结束时间:2021-06-12 08:00:00<br>
										已到达邀约地址:深圳市罗湖区东门街道金融大厦102室
									`,
			list: [
				{
				name: '全部'
			  }, 
				{
				name: '待到达',
			  },
				{
				name: '待完成',
				},
				{
				name: '已完成',
				}
			],
			current: 0
			}
		},
		methods: {
			change(index) {
			  this.current = index
			},
			cancel(){
				this.show = false
				this.isShow = false
			},
			openArrive(){
				this.show = true
			},
			openFinish(){
				this.isShow = true
			},
			confirm(){
				this.show = false
				uni.showToast({
					title:'确认完成',
					duration:2000
				})
				this.isShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-content {
	font-size: 28rpx;
	color: $u-content-color;
	padding-left: 30rpx;
	}
	
	.tab-bar{
		margin-top: 20rpx;
	}
	
	.detail {
		width: 90%;
		margin: 5%;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		height: 436rpx;
	}
	
	.state {
		display: flex;
		justify-content: space-around;
	}
	
	.states text {
		margin-left: 64rpx;
	}
	
	.btn {
		width: 160rpx;
		height: 36rpx;
		font-size: 28rpx;
		margin-top: 10rpx;
		border-radius: 20rpx;
		text-align: center;
		line-height: 32rpx;
		color: #C6100E;
		border: 2rpx solid #C6100E;
	}
	
	.message text {
		margin-left: 64rpx;
	}
	
	.title {
		text-align: center;
		height: 80rpx;
		margin-top: 20rpx;
		font-size: 32rpx;
		font-weight: 700;
		color:#121212;
	}
	
	.cancel {
		width: 50%;
		text-align: center;
		line-height: 88rpx;
	}

	.confirm {
		width: 50%;
		text-align: center;
		line-height: 88rpx;
		background-color: #c6100e;
		color: #FFFFFF;
	}
</style>
